<template>
    <div class="vxtemplate">
        <el-header>微信模板消息</el-header>
        <div class="box">
            <div class="div">
                <div class="Box">
                    <div  class="muDiv1">
                        <div style="width:100px;text-align:center;">是否有效 ：</div>
                        <el-select style="width:220px"  @change="seleFun" v-model="value" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="muDiv">
                        <div style="width:100px;">模板名称 ：</div>
                        <el-input style="width:220px" v-model="name" placeholder="请输入内容"></el-input>
                        <el-button type="primary"  icon="el-icon-search" @click="souFun" ></el-button>
                    </div>
                </div>
                <el-button type="primary" icon="el-icon-plus" @click="addFun" >添加模板</el-button>
                <el-button type="success" icon="el-icon-s-data" @click="tongFun">一键同步</el-button>
                <div class="zhu">
                    <p>主营行业:{{industry.primary_industry}}</p>
                    <p>副营行业:{{industry.secondary_industry}}</p>
                </div>
                <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                    prop="id"
                    label="ID"
                    width="150">
                    </el-table-column>
                    <el-table-column
                    prop="tempid"
                    label="模板ID"
                    width="200">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="模板名"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="content"
                    label="回复内容"
                    width="200">
                    </el-table-column>
                    <el-table-column
                    prop="status"
                    label="状态"
                    width="300">
                        <template slot-scope="scope">
                            <Vxswitch :sta-tus="scope.row.status"></Vxswitch>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="add_time"
                    label="添加时间"
                    width="150">
                    <template slot-scope="scope">
                        {{scope.row.add_time|timeFun}}
                    </template>
                    </el-table-column>
                    <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                    <template slot-scope="scope">
                        <el-button
                        @click="elitRow(scope.$index, scope.row)"
                        type="text"
                        size="small">
                        编辑
                        </el-button>
                        <el-button
                        @click="deleteRow(scope.$index, scope.row)"
                        type="text"
                        size="small">
                        删除
                        </el-button>
                    </template>
                    </el-table-column>
                </el-table>
                 <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="limit"
                    layout="total, prev, pager, next, jumper"
                    :total="count"
                    @prev-click="prevclick"
                    @next-click="nextclick">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="编辑模板消息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="模板编号" :label-width="formLabelWidth">
                    <el-input v-model="form.tempkey" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="模板名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="模板ID" :label-width="formLabelWidth">
                    <el-input v-model="form.tempid"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                     <el-radio-group v-model="form.status">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <el-button class="subbtn" type="primary" @click="tiFun">提交</el-button>
        </el-dialog>
    </div>
</template>
<script>
import {list,elits,elit,tong,deletf} from '../../api/vxapi'
import moment from 'moment'
import Vxswitch from '../../components/vxswitch.vue'
export default {
    components:{
        Vxswitch
    },
    data() {
        return {
           options:[{
                value: 1,
                label: '开启'
            },{
                value: 0,
                label: '关闭'
            }],
            value:'',
            status:'',
            name:'',
            industry:{},
            tableData:[],
            count:0,
            page:1,
            limit:3,
            formLabelWidth: '120px',
            dialogFormVisible:false,
            form:{}
        }
    },
    created() {
        this.listFun()
    },
    filters: {
        timeFun(val){
            let num=val*1000
            return moment(num).format('YYYY-MM-DD hh:mm')
        }
    },
    methods: {
        // 编辑
        elitRow(index,row){
            console.log(row);
            this.form=row
            this.dialogFormVisible=true
        },
        // 编辑提交
        tiFun(){
            elit({...this.form}).then((res)=>{
                if(res.data.status==200){
                    this.$message({
                        type: 'success',
                        message: res.data.msg,
                        duration:1000
                    });
                    this.listFun()
                    this.dialogFormVisible=false
                }else{
                    this.$message({
                        type: 'success',
                        message: res.data.msg,
                        duration:1000
                    });
                    this.dialogFormVisible=false
                }
            })
        },
        // 搜索
        souFun(){
            this.listFun()
        },
        // 一键同步
        tongFun(){
            tong().then((res)=>{
                if(res.data.status==200){
                    this.$message({
                        message: res.data.msg,
                        type: 'success',
                        duration:1000
                    });

                }else{
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration:1000
                    });
                }
            })
        },
        // 删除
        deleteRow(index,row){
            console.log(index,row);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deletf(row.id).then((res)=>{
                    if(res.data.status==200){
                        this.$message({
                            type: 'success',
                            message: res.data.msg,
                            duration:1000
                        });
                        this.listFun()
                    }else{
                        this.$message({
                            type: 'success',
                            message: res.data.msg,
                            duration:1000
                        });
                    }
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除',
                    duration:1000
                });          
            });
        },
        // 下拉
        seleFun(){
            this.status=this.value
            this.listFun()
        },
        //输入框改变页码 
        handleCurrentChange(val) { 
            this.page=val
            this.listFun()
        },
        // 上一页
        prevclick(val){
            this.page=val
            this.listFun()
        },
        // 下一页
        nextclick(val){
            this.page=val
            this.listFun()
        },
        listFun(){
            list({status:this.status,name:this.name,page:this.page,limit:this.limit}).then((res)=>{
                if(res.data.status==200){
                    this.tableData=res.data.data.list
                    this.count=res.data.data.count
                    this.industry=res.data.data.industry
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.vxtemplate{
    width: 100%;
    height: 100%;
    
}
.el-header{
    width: 100%;
    height: 50px;
    background: white;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
}
.box{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
}
.div{
    background: white;
}
.zhu{
    width: 100%;
    border: 1px solid skyblue;
    background: rgb(240,250,255);
    box-sizing: border-box;
    padding: 15px;
    margin-top: 10px;
}
.muDiv{
    width: 100%;
    height: 50px;
    display: flex;
    justify-items: center;
    align-items: center;
}
.muDiv1{
    width: 100%;
    height: 50px;
    display: flex;
    justify-items: center;
    align-items: center;
}
.Box{
    width: 100%;
    display: flex;    
}
.subbtn{
    width: 100%;
}
</style>